<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套</title>
</head>
<body>
<div id="app">
    <router-link to="/shopping">商场</router-link>
    <router-link to="/zoo">动物园</router-link>

    <router-view></router-view>

</div>
<!--  定义子组件，注意不要放到app内  -->
<template id="shoppingItem">
    <!--注意根元素-->
    <div>
        <h1>我是商场组件</h1>
        <router-link to="/shopping/shoe">鞋店</router-link>
        <router-link to="/shopping/phone">手机店</router-link>

        <router-view></router-view>
    </div>
</template>
<!-- 先加载vue再加载router -->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    const shopping = {
        template: '#shoppingItem'
    }
    const zoo = {
        template: '<h1>我是动物园组件</h1>'
    }
    const shoe = {
        template: '<h1>我是鞋店</h1>'
    }
    const phone = {
        template: '<h1>我是手机店</h1>'
    }
    const router = new VueRouter({
        routes: [
            {path:'/shopping',component:shopping,
            children: [
                {path:'/shopping/shoe',component:shoe},
                {path:'/shopping/phone',component:phone}
            ]},
            {path:'/zoo',component:zoo}
        ]
    })
    const app = new Vue({
        el: '#app',
        router
    })
</script>
</body>
</html>